<template>
  <div class="wrap">
    <div class="title">
      <img src="../../images/main/gk.png" alt> 概况
    </div>
    <div class="bodyTitle">
      <div class="list">
        <ul>
          <li>
            <img src="../../images/main/hdcs.png" alt>
            <div class="actionNum">活动次数</div>
            <div class="nums">{{info.activityCount}}</div>
          </li>
          <li>
            <img src="../../images/main/xiaolian.png" alt>
            <div class="actionNum">用户数量</div>
            <div class="nums">{{info.userCount}}</div>
          </li>
          <li>
            <img src="../../images/main/qian.png" alt>
            <div class="actionNum">账户余额</div>
            <div class="nums">￥{{info.balance.toFixed(2)}}</div>
          </li>
        </ul>
      </div>
      <div style="position: absolute;right:0;">
        <div class="msg">
          <div class="name" :title="$cookie.get('serviceName')">
            <img :src=" $cookie.get('serviceLogo') || defaultIcon" alt>
            <span>{{$cookie.get('serviceName')}}</span>
          </div>
          <div style="text-align:center;margin:10px auto;">
            <el-button type="primary" size="small" round @click="addAc()">发布活动</el-button>
          </div>
        </div>
        <div class="clear"></div>
        <div class="msg kefu">
          <div class="cphone">
            <img src="../../images/main/phone.png" alt> 客服电话
          </div>
          <p style="margin-top: 30px;">
            <!-- 400-800-5555 -->
            400-706-5655
          </p>
          <!-- <div class="fbac"><a style="text-decoration: none;" href="tencent://message/?uin=1234567&Site=Sambow&Menu=yes"><span class="qqNow">在线客服</span></a></div> -->
        </div>
      </div>
    </div>

    <div class="title weap">
      <img src="../../images/main/activity.png" alt> 即将开始的活动
    </div>
    <div class="bodyed">
      <div class="noinfo" v-if="info.activityList.length == 0">
        <img style="width:300px;" src="./../../images/main/nodata.png" alt>
      </div>
      <div class="bodyedList" v-else v-for="(item,index) in info.activityList" :key="index">
        <div class="leftImg">
          <img :src="item.activity_img" alt>
          <ul>
            <li>
              <span>房间类型：</span>
              <span>{{item.room.roomType}}</span>
            </li>
            <li>
              <span>房间面积：</span>
              <span>约{{item.room.roomArea}}平米</span>
            </li>
            <li>
              <span>{{item.activity_address}}</span>
            </li>
          </ul>
        </div>
        <div class="rightNew">
          <ul>
            <li>
              <span>{{item.activity_title}}</span>
            </li>
            <li class="bor">
              <!-- <img src="../../images/main/time.png" alt> -->
              <span style="font-size: 18px;">
                活动时间：
                <span
                  class="times"
                >{{setDate(item.activity_time)}} {{setTime(item.activity_time)}}</span>
              </span>
            </li>
            <li class="bor">
              <!-- <img src="../../images/main/didian.png" alt> -->
              <span style="font-size: 18px;">
                活动地址：
                <span class="times">{{item.activity_address}}</span>
              </span>
            </li>
            <li class="bor">
              <span>
                当前已报名：{{item.signCount}}人，
                <span
                  class="red"
                >{{item.participate_min - item.signCount <= 0 ? '已成团' : '还差' + ( item.participate_min - item.signCount )+ '人成团' }}</span>
              </span>
            </li>
            <li>
              <span style="font-size: 16px;">如活动前24小时未达到最低成团人数则活动作废。</span>
            </li>
            <li>
              <div class="btn" @click="join(item.id)">
                <span>邀请报名</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 二维码 -->
    <div class="tasker" id="img">
      <img src="../../images/main/ercode.png" alt>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: {
        activityList: []
      },
      qrSrc: "",

      defaultIcon: require("@/images/main/photo.png")
    };
  },
  methods: {
    /**
     * 邀请报名
     */
    join: function(id) {
      let that = this;
      this.$alert(
        `<img src="${
          that.$store.state.url
        }/activity/getQrCode?id=${id}&userId=${that.$cookie.get(
          "serviceId"
        )}">`,
        "二维码",
        {
          dangerouslyUseHTMLString: true
        }
      );
    },
    /**
     * 发布活动
     */
    addAc: function() {
      this.$router.push({
        path: "/main/addAc",
        query: {
          p: this.encodeJson({
            activityId: ""
          })
        }
      });
    },
    /**
     * 获取概况
     */
    getInfo() {
      let that = this;
      // console.log(this.$store.state.userId)
      that
        .axios({
          url: "service/selectActivity",
          method: "post",
          data: that.qs.stringify({
            serviceId: this.$store.state.userId
          })
        })
        .then(res => {
          if (res.data.code == 0) {
            that.info = res.data.data;
          } else {
            this.$alert(res.data.msg);
          }
        });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth() + 1 < 10
          ? "0" + (times.getMonth() + 1)
          : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getInfo();
  }
};
</script>
<style scoped>
.msg .name span {
  max-height: 49px;
  line-height: 24px;
  display: inline-block;
  width: 174px;
  float: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.noinfo {
  text-align: center;
  margin: 0 auto;
  line-height: 100px;
  font-size: 20px;
  color: #ddd;
}
.clear {
  clear: both;
}
.tasker {
  width: 400px;
  height: 400px;
  padding: 10px;
  display: none;
}
.cphone {
  height: 25px;
  padding-left: 22px;
  margin: 16px 0 14px 0;
  line-height: 25px;
}
.msg .cphone img {
  width: 17px;
  border-radius: 0;
  height: auto;
  border: 0;
  float: left;
  margin-right: 9px;
}
.msg p {
  font-size: 18px;
  color: #ef5a21;
  text-align: center;
}
.msg {
  background: #ffffff;
  width: 325px;
  height: 140px;
  font-size: 18px;
  color: #000000;
  font-weight: bold;
  float: right;
  margin-top: 20px;
  margin-left: 20px;
}
.kefu {
  top: 474px;
}
.msg .name {
  height: 49px;
  /* line-height: 49px; */
  padding-left: 82px;
  padding-top: 20px;
  width: 245px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: Center;
}
.msg img {
  border: 1px solid #979797;
  width: 49px;
  height: 49px;
  border-radius: 100%;
  margin-right: 15px;

  float: left;
}
.msg .fbac {
  background: #4b74ff;
  width: 120px;
  height: 39px;
  cursor: pointer;
  line-height: 39px;
  text-align: center;
  font-size: 18px;
  color: #ffffff;
  font-weight: bold;
  margin: 0 auto;
  margin-top: 21px;
}
.kefu .fbac {
  margin-top: 15px;
  cursor: pointer;
}
.red {
  color: #fb0606;
  font-weight: bold;
}
.wrap {
  /* padding: 68px 136px;
  width: 100%; */
  width: 90%;
  margin: 40px auto;
  position: relative;
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}
.list {
  /* width: 1200px; */
  height: 140px;
  margin-top: 27px;
  margin-left: 37px;
}
.list ul {
  display: flex;
  height: 112px;
}
.list ul li {
  float: left;
  background: #fff;
  border: 5px solid #FAFAFAFF;
  box-sizing: border-box;
  /* width: 398px; */
  width: 33.333333333%;
  flex: 1;
  height: 138px;
  text-align: center;
  position: relative;
}
.list ul li img {
  width: 25px;
  height: 25px;
  /* position: absolute;
  top: 27px;
  left: 131px; */
  vertical-align: middle;
  margin-top: -2px;
}
.actionNum {
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #000000;
  letter-spacing: 0.02px;
  padding-top: 28px;
  display: inline-block;
  width: 73px;
}
.nums {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #4b74ff;
  /* width: 400px; */
  margin-top: 29px;
  padding-left: 22px;
}
.weap {
  margin-top: 70px;
}
.bodyed {
  height: 500px;
  /* width: 1340px; */
  border-bottom: 1px solid #e6e6e6;
  margin-left: 30px;
}
.bodyedList {
  height: 500px;
  width: 90%;
  margin: 0 auto;
}
.leftImg,
.rightNew {
  height: 422px;
  margin-top: 30px;
}
.leftImg {
  float: left;
  background: #ffffff;
  border: 1px solid #efefef;
  box-shadow: 0 2px 6px 0 #efefef;
  width: 406px;
  height: 420px;
}
.leftImg img {
  width: 408px;
  height: 257px;
}
.leftImg ul li {
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #efefef;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #000000;
  letter-spacing: 0.03px;
  text-align: center;
}
.leftImg ul li:nth-child(3) {
  border: 0px;
}
.rightNew {
  margin-left: 10%;
  float: left;
  width: 470px;
  height: 420px;
}
.rightNew ul li:nth-child(1),
li:nth-child(5) {
  font-family: PingFangSC-Medium;
  font-weight: bold;
  font-size: 20px;
  color: #000000;
  letter-spacing: 0.02px;
  text-align: left;
  margin-top: 22px;
}
.rightNew ul li:nth-child(2) {
  margin-top: 40px;
}
.rightNew ul .bor {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
  letter-spacing: 0.02px;
  text-align: left;
  line-height: 30px;
}
.btn {
  background: #4b74ff;
  width: 161px;
  height: 40px;
  cursor: pointer;
}
.bor {
  position: relative;
}
.times {
  /*margin-left: 26px;*/
}
.bor img {
  position: absolute;
  top: 4px;
  width: 18px;
  left: 4px;
}
.bor img:first-of-type {
  top: 6px;
}
.btn span {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 0.02px;
}
.btn {
  margin-top: 40px;
  text-align: center;
  line-height: 40px;
}
.qqNow {
  color: white;
}
</style>
